<template>
  <md-scroll-view
    ref="scrollView"
    :scrolling-x="false"
    auto-reflow
    @refreshing="onRefresh"
    @endReached="onEndReached">

    <md-scroll-view-refresh
      slot="refresh"
      slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
      :scroll-top="scrollTop"
      :is-refreshing="isRefreshing"
      :is-refresh-active="isRefreshActive">
    </md-scroll-view-refresh>

    <md-field>
      <md-cell-item v-for="item in list" :key="item" :title="`普通条目${item}`" />
    </md-field>

    <md-scroll-view-more
      slot="more"
      :is-finished="isFinished">
    </md-scroll-view-more>
  </md-scroll-view>
</template>

<script>
import { Button, Toast, ScrollView, CellItem, Field, ScrollViewRefresh, ScrollViewMore } from 'mand-mobile'
import { SvgIcon } from '@/components'
import { http, api } from '@/tools'
export default {
  name: 'home',
  components: {
    [Button.name]: Button,
    [SvgIcon.name]: SvgIcon,
    [ScrollView.name]: ScrollView,
    [CellItem.name]: CellItem,
    [Field.name]: Field,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore
  },
  data () {
    return {
      httpGetData: '',
      httpPostData: '',
      list: 15,
      isFinished: false
    }
  },
  mounted () {
    this.testHttpGet()
    this.testHttpPost()
  },
  methods: {
    handleClick () {
      Toast.info('不错哟~')
    },
    testHttpGet () {
      http.get({
        url: api.parkLotList,
        param: {}
      }).then(response => {
        this.httpGetData = JSON.stringify(response)
      })
    },
    testHttpPost () {
      http.post({
        url: api.startPay,
        param: {}
      }).then(response => {
        this.httpPostData = JSON.stringify(response)
      })
    },
    onRefresh () {
      this.isFinished = false
      this.$refs.scrollView.finishLoadMore()
      setTimeout(() => {
        this.list = 15
        this.$refs.scrollView.finishRefresh()
      }, 1000)
    },
    onEndReached () {
      if (this.isFinished) {
        return
      }
      // async data
      setTimeout(() => {
        this.list += 5
        if (this.list >= 20) {
          this.isFinished = true
        }
        this.$refs.scrollView.finishLoadMore()
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
